<template>
  <div>
    <el-drawer v-bind="$attrs" :visible.sync="drawerVisible" v-on="$listeners" @close="onClose">
      <div style="height:100%">
        <el-row>
          <el-col class="right-preview">
            <div class="action-bar" :style="{'text-align': 'left'}">
              <span class="bar-btn" @click="onOpen(formHtml)">
                <i class="el-icon-refresh" />
                刷新
              </span>
              <span class="bar-btn delete-btn" @click="drawerVisible = false">
                <i class="el-icon-circle-close" />
                关闭
              </span>
            </div>
            <ProcessForm ref="ProcessForm" v-show="isIframeLoaded"/>
            <div v-show="!isIframeLoaded" v-loading="true" class="result-wrapper" />
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import ProcessForm from '@/views/workflow/bpmn/components/ProcessForm'

export default {
  components: {
    ProcessForm
  },
  props: ['formData'],
  data() {
    return {
      drawerVisible: false,
      isIframeLoaded: false,
      formHtml: null
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    onOpen(formHtml) {
      this.drawerVisible = true
      this.isIframeLoaded = false
      this.formHtml = formHtml
      setTimeout(() => {
        this.$refs.ProcessForm.preview(formHtml)
        this.isIframeLoaded = true
      })
    },
    onClose() {},
  }
}
</script>

<style lang="scss" scoped>
.right-preview {
  height: calc(100vh - 33px);
  overflow: auto;
  .action-bar {
    height: 33px;
    background: #f2fafb;
    padding: 0 15px;
    padding-bottom: 15px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .result-wrapper {
    height: calc(100vh - 33px);
    width: 100%;
    overflow: auto;
    padding: 12px;
    box-sizing: border-box;
  }
  .bar-btn {
    display: inline-block;
    padding: 0 6px;
    line-height: 32px;
    color: #8285f5;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    & i {
      font-size: 20px;
    }
    &:hover {
      color: #4348d4;
    }
  }
  .bar-btn + .bar-btn {
    margin-left: 8px;
  }
  .delete-btn {
    color: #f56c6c;
    &:hover {
      color: #ea0b30;
    }
  }
}
::v-deep .el-drawer__header {
  display: none;
}
</style>
